NaN

js相关概念

(一) JavaScript介绍

JavaScript是一门弱类型的编程语言。简称js。由美国网景公司发布。微软发布的类似JavaScript的语言叫JScript。

前端的编程语言只有JavaScript，后端的编程语言有java, php, c++, c, c#, go, python等。

如果说html是一个网页的骨架, 那么css就是对网页的装饰, 使网页更漂亮, 而js则是用来给网页添加动作和行为的。

(二) JavaScript运行环境

JavaScript的运行环境有两种：

  1. 浏览器
  2. 服务器(nodejs)

(三) JavaScript构成

我们主要在浏览器环境下运行的JavaScript。所以前端主要就是书写浏览器环境下的JavaScript。

浏览器环境下的JavaScript分为3大部分.

1：ECMAScript简称ES。它是js的语法规范。实际上这部分和浏览器没关系。

​ ES的最新版本是ES6。我们主学ES5.1，穿插学习ES6。

2：DOM（Document Object Model）文档对象模型，提供了操作网页元素的API。

3：BOM（Broswer Object Model）浏览器对象模型，提供了操作浏览器的API。

​ 我们主学ES。ES是Javascript的基础和核心。其次是DOM，BOM最不重要。

(1) ES主要知识点大纲

1：变量，常量和数据类型

2：运算符，表达式

3：流程控制语句, 控制结构、循环和判断

4：函数

5：对象，面向对象

其中1-3是编程基础。4-5是编程进阶，是难点，也是重点。

(2) DOM主要知识大纲

1：节点获取和操作

2：事件对象，事件流

3：html文档操作。

(3) BOM主要知识

1：location对象

2：navigator对象

3：history对象

(三) JavaScript的引入和js语句

js的两种引入方式

  1. script标签内书写JavaScript。

  2. 通过script的src引入外部的js文件。

注意，书写了src的script标签内部就不能再写JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body> 
    
    <script>
        // 在这里写js代码, 一般放在body底部
        alert('我来了');
    </script>

    <script src="./demo.js"></script>
</body>
</html>

// demo.js代码
alert('我又走了');

js语句

  1. js语句用来向浏览器发出命令
  2. js语句以分号结尾
  3. 以下是js用来输出的语句
<!DOCTYPE html>
<html lang="en"> 
<body> 

    <script>
        // 在控制台输出
        console.log('hi');
        // 输出到网页上
        document.write('我爱web');
        // 弹窗输入
        prompt('请输入手机号码');
        // 弹窗输出
        alert('hello');
      </script>
</body>
</html>

(四) 程序运行过程

浏览器运行JavaScript的过程

问题1: 开发人员书写JavaScript代码，是谁执行（运行）的，何时执行的？是谁运行？

  1. JavaScript代码（也叫 JavaScript脚本）是由浏览器运行的。

  2. 我们书写的JavaScript代码，实际是一个任务清单。

  3. 浏览器运行JavaScript代码，实际相当于按照任务清单执行任务。

  4. 浏览器运行JavaScript代码，大概分为两个阶段：

    • 解析阶段。此阶段分析代码是否有语法错误。

    • 运行阶段。解析成功后，开始逐行运行代码。（按清单执行任务）

问题2: 用户在浏览器输入url到显示页面, 这个过程发生了什么

  1. 这里需要先说明下浏览器显示网页的大概过程，分为两个部分：

    • 解析阶段。此阶段解析html内的所有标签内容。包括style和script

    • 渲染阶段。解析成功后按照解析结果渲染内容到浏览器视口内。

  2. JavaScript的代码在何时运行的？

    • JavaScript代码在浏览器解析html文档时运行。

    • 当浏览器解析到script标签时，即开始JavaScript代码的解析和执行过程。

  3. 以下是浏览器显示网页的大致过程：

    1. 从服务器下载html文档，逐行解析
    2. 如果遇到style的css样式，解析css
    3. 如果遇到script标签，开始解析JavaScript代码，解析完成后运行JavaScript代码

  4. 解析所有标签成功后，开始渲染网页内容到视口内，此过程结束后，用户将看到网页内容。

(五) 网页报错

如果因为某些原因，JavaScript会报出错误提示。

1：语法错误。SyntaxError

如果在解析JavaScript代码的过程中，发现有语法错误，则解析失败，JavaScript不会进入运行阶段

2：引用错误（ReferenceError）和类型错误（TypeError）。

如果没有语法错误，解析成功，在执行的过程中如果发生了错误，则发生错误处后面的代码无法得到执行。

常见错误：

  • xxx is not defined 意思是xxx变量没声明就使用了。这是引用错误。

  • Cannot read property xxx of undefined 不能读取undefined的xxx属性。因为undefined没有属性。

  • Cannot read property xxx of null 不能读取null的xxx属性。因为null没有属性。

  • Cannot set property xxx of undefined 不能设置undefined的xxx属性，因为undefined不能设置属性

  • Cannot set property xxx of null 不能设置null的xxx属性，因为null不能设置属性

  • xxx is not a function 意思是xxx不是函数，你把它当成了函数使用，这是类型错误。

(六) 调试

  • 有时候程序报错，我们需要知道报错原因，报错信息不一定能知道错误在哪里。

  • 这里需要了解程序运行过程中的每一步细节和状态。这是入门程序的必备技能。

  • 浏览器按照Javascript代码逐行依次执行，因此我们可以以代码行为单位逐行逐步骤分析代码的运行和跳转过程。

调试方法：

  1. debugger调试。

  2. 利用浏览器的断点功能进行逐行断点调试。

(七) 注释和分号 

    <!-- js可以使用以下两种注释 -->    
    /* 单行注释 */
    // 单行注释
    /**
    * 多行注释
    * 多行注释
    * 多行注释
    */


    <!-- js每行语句结束之后需要写;(英文) -->
    <!-- 句末加;是良好的习惯 -->

    <!-- script的标签暂时放在body的最后面 -->
    <script>
        // alert('你好');
        /*alert('你好');*/
        alert('你好');
        alert('他也好');
    </script>

(八) 思考题

使用js"翻译"以下句子

小学应用题1: 有甲乙丙3辆车,甲乙的速度是50km/h,丙的速度是甲乙速度之和,求丙车速度.
(应用题,需要写解题步骤)

解:
设:x是甲车速度,y是乙车速度,z是丙车速度;
根据已知: z = x + y; 
将x和y的值50带入以上方程计算得z的值是100km/h;

// js代码

小学应用题2:
已知有甲乙丙三辆车，甲车速度是50km/h，乙车速度是甲车速度加上10km/h后的1.4倍，丙车速度是
乙车速度的三分之二还少5km/h，求丙车速度

// js代码